<script lang="ts" setup>
import { useVariableStore } from "@/stores/variable"
const variableStore = useVariableStore()
</script>

<template>
  <umrp-page bg-color="#f2f2f2">
    <umrp-title-bar>
      <umrp-icon name="left" :size="20" v-route="'XiaolankaClientOrderList'"></umrp-icon>
      <umrp-text>订单详情</umrp-text>
    </umrp-title-bar>
    <umrp-container padding="10px" :gap="10">
      <umrp-card border="false">
        <umrp-text :size="20" bold>待使用</umrp-text>
      </umrp-card>
      <umrp-card :border="false">
        <umrp-media>
          <template #cover>
            <umrp-image :width="50" :height="50"></umrp-image>
          </template>
          <umrp-text bold>商品名称</umrp-text>
          <umrp-container direction="horizonal" padding="14px 0 0" justify="between">
            <umrp-text>x1</umrp-text>
            <umrp-text>实付￥153</umrp-text>
          </umrp-container>
        </umrp-media>
        <umrp-container direction="horizonal" padding="16px 0 0" justify="between">
          <umrp-text>未使用</umrp-text>
          <umrp-text @click="$state('viewCoupon', true)">查看卷码</umrp-text>
        </umrp-container>
      </umrp-card>
      <umrp-card :border="false">
        <template #body>
          <umrp-container padding="16px" :gap="16">
            <umrp-text bold :size="16">订单信息</umrp-text>
            <umrp-container direction="horizonal" justify="between">
              <umrp-text color="secondary">购买数量</umrp-text>
              <umrp-text>1</umrp-text>
            </umrp-container>
            <umrp-container direction="horizonal" justify="between">
              <umrp-text color="secondary">订单总价</umrp-text>
              <umrp-text-price>66</umrp-text-price>
            </umrp-container>
            <umrp-container direction="horizonal" justify="between">
              <umrp-text color="secondary">实付金额</umrp-text>
              <umrp-text-price>26</umrp-text-price>
            </umrp-container>
            <umrp-container direction="horizonal" justify="between">
              <umrp-text color="secondary">订单号码</umrp-text>
              <umrp-text>20250603000135589</umrp-text>
            </umrp-container>
            <umrp-container direction="horizonal" justify="between">
              <umrp-text color="secondary">下单时间</umrp-text>
              <umrp-text>2025-06-03 09:05:05</umrp-text>
            </umrp-container>
            <umrp-container direction="horizonal" justify="between">
              <umrp-text color="secondary">支付方式</umrp-text>
              <umrp-text>微信支付</umrp-text>
            </umrp-container>
          </umrp-container>
        </template>
      </umrp-card>
    </umrp-container>
    <umrp-modal v-model:visible="variableStore.variable.viewCoupon" cancel-text="关闭" :ok-button="false">
      <umrp-container :gap="20" align="center">
        <umrp-text align="center" :size="16" bold>订单核销码</umrp-text>
        <umrp-qrcode :width="150" :height="150"></umrp-qrcode>
      </umrp-container>
    </umrp-modal>
  </umrp-page>
</template>